<template>
  <section>
    <van-sticky>
      <PageHeader title="课程管理"/>
    </van-sticky>

    <van-tabs v-model="type" sticky @click="onTabChange">
      <van-tab title="课程" name="course">
        <div class="pd10">
          <van-button type="primary" round block @click="$router.push({name: 'CourseAdd'})">+添加</van-button>
        </div>

        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData">
          <div class="flex flex-col bg-color-white mb10 font-common"
               v-for="(item, index) in dataList"
               :key="index">
            <div class="flex flex-row flex-center">
              <img :src="item.img_url" class="w100" />
            </div>
            <div class="flex flex-row flex-left pd10">
              {{item.name}}
            </div>

            <div class="flex flex-row flex-center font-common border-top-gray pt10 pb10">
              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'CourseEdit', params: {id: item.id}})">
                <i class="iconfont icon-bianji mr5" />编辑
              </div>
              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'CourseOrderLists', query: {courseId: item.id}})">
                <i class="iconfont icon-baoming mr5" />订单管理
              </div>
              <div class="flex flex-row flex-center flex-1" @click="showSignInQrCode(index)">
                <i class="iconfont icon-ico mr5" />签到码
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="订单" name="order">

      </van-tab>
    </van-tabs>

    <van-popup v-model="signInQrCodePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        签到码
      </div>

      <div class="text-center mt10">
        <img :src="signInQrCodeImg" height="200" width="200" v-if="signInQrCodeImg" />
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码保存或发给好友
      </div>
    </van-popup>

    <Tabbar active="course"/>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, List, Search, Sticky, Button} from 'vant';
  import {activitySignInQrCodeUri, courseListsUri, courseSignInQrCodeUri} from "../../common/api";
  import PageHeader from "../componets/PageHeader";
  import Tabbar from '../componets/Tabbar';
  Vue.use(Toast).use(Dialog).use(List).use(Search).use(Sticky).use(Button);

  export default {
    components: {
      PageHeader,
      Tabbar
    },
    data() {
      return {
        type: 'course',
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
        signInQrCodePopupVisible: false,
        signInQrCodeImg: null
      }
    },
    methods: {
      onTabChange(name) {
        this.type = name;
        if(name == 'order') {
          this.$router.push({name: 'CourseOrderLists'});
        }
      },
      showSignInQrCode(index) {
        const that = this;
        that.$http.get(courseSignInQrCodeUri + '?id=' + that.dataList[index].id).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.signInQrCodeImg = data.img;
            that.signInQrCodePopupVisible = true;
          }
        }, response => {
          // error callback
        })
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = courseListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {

    }
  }
</script>

<style scoped>

</style>
